<script setup>
const props = defineProps({
	item: Object,
	toNaryad: Function,
	// moveTo: Function,
	index: Number,
	getUsl: Function,
})

const class_one = 'py-1 text-center break-normal border flex flex-col align-items justify-center'
const class_two = 'col-span-2 py-1 text-center break-normal border flex flex-col align-items justify-center'
const class_three = 'col-span-4 items-center break-normal border flex flex-col align-items justify-center'
const class_six = 'py-1 font-mono text-center break-normal border flex flex-col align-items justify-center'
const class_seven = 'py-1 col-span-3 text-center break-words border flex flex-col align-items justify-center'

</script>

<template>
	<div class="grid grid-cols-4 border-separate border-spacing-2 border border-slate-400 rounded-md my-2 mx-2">
		<div :class="class_one">
			<div class="tooltip" data-tip="Открыть наряд">
				<div class="rounded mx-1 hover:bg-primary" @click="props.toNaryad(props.index, props.item.id)"><b>{{
					props.item.nkv
				}}</b></div>
			</div>
		</div>
		<div :class="class_two">
			<!-- {{ item.user_etap_link }} -->
			{{ props.item?.naryad_doc?.user?.fam }} {{ props.item?.naryad_doc?.user?.im[0] }}.{{
				props.item?.naryad_doc?.user?.ot[0] }}
			<!-- {{ item.naryad_doc["fam"] }} {{ item.naryad_doc["im"][0] }}.{{ item.naryad_doc["ot"][0] }}. -->
		</div>
		<div :class="class_one">
			{{ ~~((new Date() - new Date(props.item.dn_etap)) / (1000 * 60 * 60 * 24)) }} /
			{{ ~~((new Date() - new Date(props.item.dou)) / (1000 * 60 * 60 * 24)) }}
		</div>
		<div :class="class_seven">{{ props.item.patient.fam }} {{ props.item.patient.im }} {{ props.item.patient.ot }}
		</div>
		<div :class="class_six">
			<div class="tooltip" data-tip="Список услуг">
				<div class="rounded mx-1 hover:bg-primary"
					@click="props.getUsl(props.item.idkv, props.item.nkv, props.item.stu.toLocaleString(), props.item.patient.fam, props.item.patient.im, props.item.patient.ot)">
					<b>{{ (props.item.stu).toLocaleString() }} ₽</b>
				</div>
			</div>
		</div>
		<!-- <NaryadListMoveButton :index="index" :item="item" :toNaryad="toNaryad" :moveTo="moveTo" /> -->
		<div :class="class_three">
			<div v-if="props.item.container.id > 0">Номер контейнера: <b>{{ props.item.container.id }}</b></div>
			<div v-else>Номер контейнера не назначен</div>
		</div>
	</div>
</template>